<template>
  <div>
    <ChangePwd ref="pwdModal"></ChangePwd>
    <ChangeGesture ref="gestureModal" @ok="onGestureOk"></ChangeGesture>
    <ChangeIdCard ref="idCardModal" @ok="onIdCardOk"></ChangeIdCard>
    <ChangeEmail ref="emailModal" @ok="onEmailOk"></ChangeEmail>
    <ChangePhone ref="phoneModal" @ok="onPhoneOk"></ChangePhone>
    <a-list
      itemLayout="horizontal"
      :dataSource="security">
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
        <a-list-item-meta>
          <a slot="title">{{ item.title }}</a>
          <span slot="description">
            <span class="security-list-description">{{ item.description }}</span>
          </span>
        </a-list-item-meta>
        <template v-if="item.actions">
          <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
        </template>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import ChangePwd from '@/views/account/personal/ChangePwd'
import ChangeGesture from '@/views/account/personal/ChangeGesture'
import ChangeIdCard from '@/views/account/personal/ChangeIdCard'
import ChangeEmail from '@/views/account/personal/ChangeEmail'
import ChangePhone from '@/views/account/personal/ChangePhone'
export default {
  components: {
    ChangePwd, ChangeGesture, ChangeIdCard, ChangeEmail, ChangePhone
  },
  data () {
    return {
      info: {
        idCard: '',
        gesture: '',
        phone: '',
        email: ''
      }
    }
  },
  computed: {
      security () {
        const idCardDes = this.info.idCard.length === 0 ? '未设置' : `已设置身份证号：${this.info.idCard}`
        const gestureDes = this.info.gesture.length === 0 ? '未设置' : `已设置手势密码：${this.info.gesture}`
        const phoneDes = this.info.phone.length === 0 ? '未绑定' : `已绑定手机：${this.info.phone}`
        const emailDes = this.info.email.length === 0 ? '未绑定' : `已绑定邮箱：${this.info.email}`
        return [
          { title: '身份证号', description: idCardDes, actions: { title: '修改', callback: () => { this.$refs.idCardModal.open() } } },
          { title: '账户密码', description: '已设置', actions: { title: '修改', callback: () => { this.$refs.pwdModal.open() } } },
          { title: '手势密码', description: gestureDes, actions: { title: '修改', callback: () => { this.$refs.gestureModal.open() } } },
          { title: '绑定手机', description: phoneDes, actions: { title: '修改', callback: () => { this.$refs.phoneModal.open() } } },
          { title: '绑定邮箱', description: emailDes, actions: { title: '修改', callback: () => { this.$refs.emailModal.open() } } }
        ]
      }
  },
  mounted () {
    this.searchUserInfo()
  },
  methods: {
    searchUserInfo () {
      this.$http.get('/zg-system/user/info', {}, data => {
        this.info.idCard = data.idCard
        this.info.gesture = data.gesture
        this.info.phone = data.phone
        this.info.email = data.email
      })
    },
    onGestureOk (gesture) {
      this.info.gesture = gesture
    },
    onIdCardOk (idCard) {
      this.info.idCard = idCard
    },
    onEmailOk (email) {
      this.info.email = email
    },
    onPhoneOk (phone) {
      this.info.phone = phone
    }
  }
}
</script>

<style scoped>

</style>
